<template>
  <main-wrap class="ptp1">
      <div class="weui-cells weui-cells_form">
          <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">巡检地点<span class="red mlp1">*</span></label></div>
              <div class="weui-cell__bd">
                  <input class="weui-input" type="text" placeholder="请输入" v-model="addrtext">
              </div>
          </div>
      </div>

      <div class="weui-cells weui-cells_form">
          <div class="weui-cell weui-cell_access" @click="setSTime">
              <div class="weui-cell__hd"><label class="weui-label">开始时间<span class="red mlp1">*</span></label></div>
              <div class="weui-cell__bd">
                  <input class="weui-input" type="text" placeholder="请选择" readonly v-model="stimeVal">
              </div>
              <div class="weui-cell__ft"></div>
          </div>
          <div class="weui-cell weui-cell_access" @click="setETime">
              <div class="weui-cell__hd"><label class="weui-label">结束时间<span class="red mlp1">*</span></label></div>
              <div class="weui-cell__bd">
                  <input class="weui-input" type="text" placeholder="请选择" readonly v-model="etimeVal">
              </div>
              <div class="weui-cell__ft"></div>
          </div>
          <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">巡检时长<span class="red mlp1">*</span></label></div>
              <div class="weui-cell__bd">
                  <input class="weui-input" type="number" placeholder="0小时" v-model="durationHours">
              </div>
          </div>
      </div>

      <div class="weui-cells weui-cells_form pinfo_textarea_title">
          <div class="weui-cell">
              <div class="weui-cell__hd"><label class="weui-label">巡检结果<span class="red mlp1">*</span></label></div>
          </div>
      </div>
      <my-textarea class="pinfo_textarea_content" @areatextchg="areatextchg" :pholder="'填写内容'" :stext="descritext" ref="descriarea"></my-textarea>

      <my-uploader ref="uploader" :mst="true"></my-uploader>

      <div class="paddingP3 mtp4">
          <a href="javascript:;" class="weui-btn weui-btn_primary" :class="{'weui-btn_disabled': btnDisabled}" @click="gonext">提交</a>
      </div>

      <van-actionsheet v-model="stimePopupShow">
        <van-datetime-picker
          type="datetime"
          :formatter="formatter"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="setSTimeVal"
          @cancel="cancelSetSTime"
        />
      </van-actionsheet>
      <van-actionsheet v-model="etimePopupShow">
        <van-datetime-picker
          type="time"
          :formatter="formatter"
          :min-hour="startHour"
          :min-minute="startMinute"
          @confirm="setETimeVal"
          @cancel="cancelSetETime"
        />
      </van-actionsheet>
  </main-wrap>
</template>

<script>
import MainWrap from '@/components/mainWrap'
import MyTextarea from '@/components/mytextarea'
import MyUploader from '@/components/myuploader'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'PatrolInfo',
  data () {
    return {
      // actionSheetDisplay: false,

      // rtype: this.$route.params.ty,
      // rtypetext: this.$route.params.tyname,
      // curBuilding: '',
      // curBuildingID: '',

      // allowtimenum: 3,
      // principalUName: '',
      // rolecode: localStorage.rolecode ? localStorage.rolecode : '0',

      btnDisabled: true,
      addrtext: '',
      descritext: '',

      stimePopupShow: false,
      etimePopupShow: false,
      minDate: '',
      maxDate: '',
      startHour: 0,
      startMinute: 0,

      stimeVal: '',
      etimeVal: '',
      durationHours: ''
    }
  },
  computed: {
    ...mapState(['user_report_upload_items'])
  },
  watch: {
    addrtext () {
      this.checkinput()
    },
    stimeVal () {
      this.checkinput()
    },
    etimeVal () {
      this.checkinput()
    },
    durationHours () {
      this.checkinput()
    },
    descritext () {
      this.checkinput()
    },
    user_report_upload_items () {
      this.checkinput()
    }
  },
  components: {
    MainWrap,
    MyTextarea,
    MyUploader
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.ptp1'))

    this.empty_user_report_upload_items()

    this.minDate = new Date()
    this.minDate.setFullYear(this.minDate.getFullYear() - 1)
    this.minDate.setMonth(0)
    this.minDate.setDate(1)
    this.minDate.setHours(0)
    this.minDate.setMinutes(0)

    this.maxDate = new Date()
    this.maxDate.setFullYear(this.maxDate.getFullYear() + 1)
    this.maxDate.setMonth(11)
    this.maxDate.setDate(31)
    this.maxDate.setHours(23)
    this.maxDate.setMinutes(59)
  },
  methods: {
    ...mapMutations(['empty_user_report_upload_items']),
    gonext () {
      if (!this.btnDisabled) {
        this.$toast.loading({
          duration: 0,
          message: '请稍等...'
        })

        let params = {
          attachment: this.user_report_upload_items,
          place: this.addrtext,
          stime: this.stimeVal + ':00',
          etime: this.stimeVal.substring(0, 11) + this.etimeVal + ':00',
          duration: this.durationHours,
          inspectionResult: this.descritext
        }
        this.cm.myajax('/api/inspection/save', params, (data) => {
          this.$toast.clear()
          localStorage.curPatrolID = data.id
          this.$router.push('/patroldetail')
          // this.$router.push('/patrollist')
        })
      }
    },
    areatextchg (text) {
      this.descritext = text
    },
    checkinput () {
      if (this.addrtext !== '' && this.descritext !== '' && this.stimeVal !== '' && this.etimeVal !== '' && this.durationHours !== '' && this.durationHours >= 0 && this.user_report_upload_items.length > 0) {
        this.btnDisabled = false
      } else {
        this.btnDisabled = true
      }
    },
    setSTime () {
      this.stimePopupShow = true
    },
    setSTimeVal (v) {
      this.startHour = v.getHours()
      this.startMinute = v.getMinutes()
      this.stimeVal = this.cm.gettimestr3(v).substring(0, 16)
      this.cancelSetSTime()
    },
    cancelSetSTime () {
      this.stimePopupShow = false
    },
    setETime () {
      this.etimePopupShow = true
    },
    setETimeVal (v) {
      this.etimeVal = v
      this.cancelSetETime()
    },
    cancelSetETime () {
      this.etimePopupShow = false
    },
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}时`
      } else if (type === 'minute') {
        return `${value}分`
      }
      return value
    }
  }
}
</script>

<style lang="stylus" scoped>
.weui-input
  text-align right
.pinfo_textarea_title:after
  border-bottom none
.pinfo_textarea_content
  margin-top -1px
  &:before
    border-top none
</style>
